<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>修改地区页面</title>
	<style>
        /* 新增样式，固定下拉框的宽度和高度 */
        #areaSelect {
            width: 200px; /* 可根据需要调整宽度 */
            height: 30px; /* 可根据需要调整高度 */
        }
	</style>
</head>

<body>
	<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" class="TitleColor">
		<tr>
			<td width="15%" valign="top" bgcolor="#E1E1E1" height="100%">
				<div id='leftpage'>
			</td>

			<td width="85%" valign="top">
				<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td style="display: flex; align-items: center; justify-content: center; height: 100vh;">
							<div style="display: flex; flex-direction: row; align-items: center;">
								<!-- 修改为下拉框 -->
								<select id="areaSelect">
									<option value="" disabled selected>请选择地区</option>
								</select>
								<!-- 修改按钮位置，放在下拉框后面 -->
								<button onclick="modifyArea()" style="margin-left: 10px;">修改</button>
							</div>
						</td>
					</tr>
				</table>
			</td>
		<tr>
			<td bgcolor="#E1E1E1" align="center">
				<div id='totalpage'></div>
			</td>
			<td height="60" align="center">
				<div id='footerpage'></div>
			</td>
		</tr>
		</tr>
	</table>
</body>

<script>
	function loadScript(c, d) { var b = document.createElement("script"); b.type = "text/javascript"; var e = sessionStorage.getItem(c); e ? (b.textContent = e, d(b)) : fetch(c).then(function (a) { return a.text() }).then(function (a) { b.textContent = a; sessionStorage.setItem(c, a); d(b); location.reload() })["catch"](function (a) { console.error("Error loading the script:", a) }) };
	loadScript("tu_0.js", function (script) { document.head.appendChild(script); });
</script>
<script type="text/javascript" language="javascript">
	if (sessionStorage.getItem("tu_0.js")) {		// 读取记忆是否已保存js文件
		loadHtml("left.htm", "leftpage");
		loadHtml("total.htm", "totalpage");
		loadHtml("footer.htm", "footerpage");
	}

	var first = 0;
	function fun() {
		if (first == 0) {
			first = 1;
			setTimeout(function () { myTimer("cookie", 0, 0, 0, 0) }, 0);		//自动发送post指,只有打开页面的时候，才发送一次送一次
		}
		else {
			// if (++first > 10) {
			// 	first = 1;
			// 	setTimeout(function () { myTimer("cookie", 0, 0, 0, 0) }, 0);		//自动发送post指,只有打开页面的时候，才发送一次送一次
			// }
		}
	}
	setInterval("fun()", 100);			// 周期性调用函数 每隔100毫秒调用一次	

	function myTimer(type, area) {
		var phpName = "index.php";
		var xhr = postPhp(phpName);
		xhr.onreadystatechange = function () {		//2.注册回调函数
			var array_name = txtUnzip(xhr);
			if (array_name != null) {
				if (type == "cookie") {
					cookiemyFunction(array_name)	// 返回的信息在html页面显
				}
				if (type == "Cread") {
					myFunction(array_name)	// 返回的信息在html页面显
				}
				if (type == "modify") {
					modifyFunction(array_name)	// 返回的信息在html页面显
				}
			}
		}

		if (type == "cookie") {
			txtZip(xhr, "t:ncki");
		}
		if (type == "Cread") {
			txtZip(xhr, "t:nare");
		}
		if (type == "modify") {
			txtZip(xhr, "t:umaa&area:" + area, 1);
		}
	}
	function cookiemyFunction(arr) {
		switch (arr.result) {
		case "ok":
			myTimer("Cread");
			document.getElementById("totalSpace").textContent = showSpace(arr.totd, arr.usdd);
		break; 
		default:
			alert('请先登录后，再操作！');
			window.location.href = "user.htm";
			return false;
		}
	}

	function myFunction(arr) {
		if (arr.result == "ok") {
			var areaSelect = document.getElementById("areaSelect");
			// 清空下拉框中的现有内容
			areaSelect.innerHTML = '<option value="" disabled selected>请选择地区</option>';

			// 递归函数，用于处理嵌套的地区列表
			function createOptions(items, level = 0, callback) {
				if (items.length === 0) {
					// 当没有子项时，调用回调函数
					if (callback) {
						callback();
					}
					return;
				}
				items.forEach((item, index) => {
					const name = item[0];
					const areaCode = item[1];
					const subItems = item[2];

					const option = document.createElement('option');
					option.value = areaCode;
					// 使用 margin-left 代替 padding-left
					option.textContent = '\u00A0\u00A0\u00A0\u00A0'.repeat(level) + name; // 使用非换行空格
					
					areaSelect.appendChild(option);

					if (subItems && subItems.length > 0) {
						createOptions(subItems, level + 1);
					}

					if (index === items.length - 1) {
						// 当处理到最后一个项时，调用回调函数
						if (callback) {
							callback();
						}
					}
				});
			}

			// 开始创建选项，并传入回调函数
			createOptions(arr.list, 0, function() {
				console.log('地区选项创建完成');
				// 可以在这里添加其他逻辑，比如显示提示框等
				// alert('地区选项创建完成');
				var name =  sessionStorage.getItem("area");
				if (name) {
					// 使用正则表达式分割字符串，匹配一个或多个连续的空白字符
					var parts = name.split(/\s+/);
					var last = parts.pop();
					// 生成每段4个unicode格式的空格
					var leadingSpaces = '\u00A0'.repeat(4 * (parts.length));
					var formattedLast = leadingSpaces + last;
					// 遍历下拉框的选项，找到匹配的地区并选中
					for (var i = 0; i < areaSelect.options.length; i++) {
						// 去除选项文本内容的前导空格
						var optionText = areaSelect.options[i].textContent;
						if (optionText === formattedLast) {
							areaSelect.selectedIndex = i;
							break;
						}
					}
				}
			});
		} else {
			return false;
		}
	}

	function modifyFunction(arr) {
		if (arr.result == "ok") {
			alert("修改成功");
		}
	}
	// 修改地区信息的函数
	function modifyArea() {
		var selectedArea = document.getElementById("areaSelect").value;
		if (selectedArea) {
			// 将选中的地区信息存储到本地存储中
			myTimer("modify", selectedArea);
		}
	}

</script>

</html>